<style type="text/css">
    .swiper-slide
    {color:#ddd;background-position: center; background-size: 100%;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;font-weight: bold;text-align: center;}
    .swiper-slide:hover,.swiper-slide:active
    {text-decoration: none!important;}
    .swiper-text-box
    {background:rgba(0,0,0,0.5);padding:5px;}
    #video-play
    {display:block;border-radius:10px;-webkit-backdrop-filter: saturate(180%) blur(20px);backdrop-filter: saturate(180%) blur(20px);background:rgba(255,255,255,0.6);color:white;}
    @media(min-width: 1000px){
        #home-swiper .swiper-slide
        {font-size:26px;line-height:30px;}
        #home-swiper .swiper-slide small
        {font-size:18px;line-height: 18px;}
        .swiper-text-box
        {width:100%;padding:25px 60px;text-align: left;}
        .swiper-text-box subtitle
        {color:#aaa;line-height: 2}
        #video-play
        {cursor:pointer;font-size:48px;line-height:30px;padding:15px 20px;}
        #video-play:hover
        {border:1px solid white;background-color: rgba(255,255,255,0.8);}
    }
    @media(min-width: 1000px){
        #home-swiper
        {max-width: 730px;height:392px;}
        .swiper-text-box
        {margin-top: 250px;}
        #mall-suggest-left-show
        {height: 392px;}
        #mall-suggest-left-show>ul>li>div
        {padding:15px;}
    }
    @media(min-width: 1280px){
        #home-swiper
        {max-width: 990px;height:500px;}/*max-width: 930px;*/
        .swiper-text-box
        {margin-top: 300px;}
        #mall-suggest-left-show
        {height: 500px;}
        #mall-suggest-left-show>ul>li>div
        {padding:20px;}
    }
    @media(max-width: 768px){
        #home-swiper
        {height:222px;background: #ccc;}
        #video-play
        {padding:30px 30px 10px 30px;}
        #video-play i.i
        {font-size: 48px;line-height: 24px;}
    }


    #mall-suggest-left-show
    {background-color: white;position: absolute;z-index: 99;color:#666;}
    #mall-suggest-left-show>ul>li>div
    {position: relative;float: left;width: 225px;}
    #mall-suggest-left-show>ul
    {float: left;}
    #mall-suggest-left-show img
    {width:40px;height:40px;}
    #mall-suggest-left-show a
    {border:1px solid #ff6700;background: #fff;color: #ff6700;font-size: 12px;padding:5px;}
    #mall-suggest-left-show a:hover
    {color: #fff;background-color: #f25807;border-color: #f25807}
</style>
<div id='mall-suggest-left-show'></div>
<div id='home-swiper' class="swiper-container swiper-container-horizontal bc-rank" data-port='http://api.hongyanche.com/marketing/swiper_list'>
    <div class="swiper-wrapper" style=" transition: 0ms; -webkit-transition: 0ms;">
        <a class='swiper-slide bc-rank-loading'>
            <span class='weui-loading'></span> <small style='color:#aaa'>加载中</small>
        </a>
        <a class='swiper-slide bc-rank-template'>
            <videolink rank=d>
                <span data-toggle='modal' data-target='#video-modal' id='video-play'>
                    <videolink rank=1 class='hidden'></videolink>
                    <i class='i i-playfill'/><br/><small style="color:#444"><subtitle rank=1></subtitle></small>
                </span>
            </videolink>
            <videolink rank=none class='swiper-text-box'>
                <div class='visible-xs'>
                    <small><subtitle_m rank=1></subtitle_m></small>
                </div>
                <div>
                    <subject rank=1></subject>
                </div>
                <div>
                    <small><subtitle rank=1></subtitle></small>
                </div>
                <div class='hidden-xs' style='background-color: #ff6700;color:white;padding:5px 30px;width: 100px;font-size: 18px;'>了解详情</div>
                <url rank=1 class='hidden'></url>
                <sublink rank=1 class='hidden'></sublink>
                <url rank=1 class='hidden'></url>
            </videolink>
        </a>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-white"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
    <!-- Add Arrows -->
    <div class="swiper-button-white swiper-button-next hidden-xs" ></div>
    <div class="swiper-button-white swiper-button-prev hidden-xs"></div>
</div>
<script>
    $("#home-swiper").on('bc-rank-success', function(event) {
        var mm = ISMOBILE();
        var e = $(this);
        e.removeClass('.bc-rank')
        e.find('.bc-rank-template').remove();
        e.find('.bc-rank-loading').remove();
        e.find('.bc-rank-content').each(function(index, el) {
            var url = $(el).find('url').html();
            if(mm) url = url + "_m";
            $(el).css('background-image','url('+url+')');
            var link = $(el).find('sublink').html();
            if(link) $(el).attr('href',link);
            if(link.substring(0,1) != "#") $(el).attr('target','_blank')
        });
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            slidesPerView: 1,
            paginationClickable: true,
            spaceBetween: 30,
            autoplay: 3000,
            speed:1000,
        });
    })
</script>